<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./card.css">
    <link rel="stylesheet" href="./btn.css">
    <link rel="stylesheet" href="./烟雾字体.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .m {
            display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 100px;
            flex-wrap: wrap;
        }

        .dv {
            width: 13%;
            height: 400px;
            /* background-color: saddlebrown; */
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            color: #fff;
            transition: all 2s;
            cursor: pointer
        }

        .border {
            width: 400px;
            height: 400px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
            color: #fff;
            transition: all 2s;
            cursor: pointer;
        }

        /* div:last-child:nth-child(7n) {
            margin-right: 66%;
        } */

        .generalsSpan {
            transform: rotateY(-180deg);
            width: 95%;
            height: 95%;
            justify-content: center;
            align-items: center;
            display: none;
            background-size: 100% 100%;
        }

        .p1 {
            width: 100%;
            height: 100%;
            background: url('./img/back.png');
            background-size: 100% 100%;
        }
    </style>
</head>

<body>
    <p class="text">
        保底抽卡：70次保底一张橙卡,35次保底一张紫卡，21次保底一张蓝卡。
    </p>


    <button disabled class="custom-btn btn-3 choujiang"><span>一键抽奖</span></button>
    余额：<button id="jine" disabled>0</button>
    <button class="custom-btn btn-6 chongzhi"><span>充值</span></button>
    <main class="m">
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
        <div class="dv">
            <div class="border">
                <span class="generalsSpan"></span>
            </div>
            <p class="p1"></p>
        </div>
    </main>
    <script src="./烟雾字体.js"></script>
    <script src="./cardUrl.js"></script>
    <script src="./index.js"></script>
    <script src="./generalProbability.js"></script>
    <script>
        function IsPhone() {
            //获取浏览器navigator对象的userAgent属性（浏览器用于HTTP请求的用户代理头的值）
            var info = navigator.userAgent;
            //通过正则表达式的test方法判断是否包含“Mobile”字符串
            var isPhone = /mobile/i.test(info);
            //如果包含“Mobile”（是手机设备）则返回true
            return isPhone;
        }
        let Phone = IsPhone()

        let arr = ['橙卡武将', '紫卡武将', '蓝卡武将', '绿卡武将', '绿卡武将', '白卡武将', '白卡武将']
        // let newArr = []
        let pre = 1400 //金额
        let dom = document.getElementsByClassName('dv') //每张卡片最外层的盒子
        let border = document.getElementsByClassName('border') //卡片边缘彩光盒子
        let span = document.getElementsByClassName('generalsSpan') //放置卡片图片的盒子
        let p = document.getElementsByClassName('p1') //卡牌背面背景图片盒子
        let chongzhi = document.getElementsByClassName('chongzhi')[0] //充值按钮
        let jine = document.getElementById('jine') //展示金额的按钮
        jine.innerHTML = pre
        let choujiang = document.getElementsByClassName('choujiang')[0] //一键抽奖按钮
        let m = document.getElementsByClassName('m')[0]

        let fl = false
        let ck = false //是否是一键抽奖动画时
        let a = 0 //大于等于70必出橙卡，小于49必不会出橙卡，其他卡保留上回
        let b = 0 //大于等于35必出紫卡，小于21必不会出紫卡，其他卡保留上回
        let c = 0 //大于等于21必出蓝卡，小于14必不会出蓝卡，其他卡保留上回
        let classList = ['orange', 'purple', 'blue', 'green', 'grey']

        let conArr = []
        let all = false
        if (Phone) {
            for (let i = 0; i < dom.length; i++) {

                dom[i].style.width = '33%'
                dom[i].style.height = '200px'
                border[i].style.width = '100%'
                border[i].style.height = '200px'

                if (i == dom.length - 1) {
                    dom[i].style.marginRight = '66%'
                }
            }
        } else {

            for (let i = 0; i < dom.length; i++) {
                dom[i].style.width = '13%'
                dom[i].style.height = '400px'
            }
        }
        for (let i = 0; i < dom.length; i++) {
            dom[i].onclick = function () {
                if (ck) {
                    return
                } else {
                    if (conArr.length == dom.length || all == true) {

                        for (let j = 0; j < dom.length; j++) {
                            dom[j].style.transition = 'all 0s';
                            dom[j].style.transform = 'rotateY(' + 360 + 'deg)';
                            span[j].style.display = 'none'
                            border[j].style.display = 'none'
                            p[j].style.display = 'block'

                            all = false
                        }
                        for (let h = 0; h < p.length; h++) { //删除所有p标签自定义index属性
                            p[h].removeAttribute('index')
                        }
                        conArr = []
                    } else {
                        span[i].style.color = '#fff'

                        if (pre != 0) {
                            let index = p[i].getAttribute('index') //获取自定义index
                            if (index != 1) { // 判断是否是1，防止多次点击扣钱
                                pre -= 100
                            }
                            p[i].setAttribute('index', 1) //设置自定义属性
                            jine.innerHTML = pre
                            a += 1
                            b += 1
                            c += 1

                            if (conArr.indexOf(i) == -1) {
                                conArr.push(i)
                                console.log(i, 'iiiiiii')
                                oneClickDraw(dom[i], span[i], border[i], i, '单抽') //调用卡牌出现概率及替换
                            }
                        } else {
                            alert("充钱吧，充钱使你变强，使你成为最亮的仔")
                        }
                    }
                }
            }
        }
        setInterval(() => {
            if (ck) {
                choujiang.disabled = true
            } else {
                if (pre < (dom.length * 100 - conArr.length * 100)) {
                    choujiang.disabled = true
                } else {
                    choujiang.disabled = false
                }
            }
        }, 0)
        chongzhi.onclick = function () {
            pre += 500
            jine.innerHTML = pre
        }
        choujiang.onclick = function () { //一键抽奖按钮事件

            ck = true


            if (fl || conArr.length == dom.length) {
                reset() //重置卡牌
            }
            fl = true
            setTimeout(() => {
                fn() //单抽函数
            }, 500)
        }

        function fn() { //一键抽奖函数
            console.log('一键抽奖')
            if (pre != 0) { //价格金额处理
                pre -= 700 - (100 * conArr.length)
            }
            jine.innerHTML = pre
            a += dom.length - conArr.length
            b += dom.length - conArr.length
            c += dom.length - conArr.length

            for (let i = 0; i < dom.length; i++) {
                oneClickDraw(dom[i], span[i], border[i], i, '一键抽奖') //调用卡牌出现概率及替换
            }
        }
    </script>
</body>

</html>